// 科创概览 - 产学研载体
#IurCarrier {
  height: 1080px;
  background: no-repeat url(../../../assets/bg_map_sz.jpg);
  background-size: 100% 100%;

  > main {
    height: calc(1080px - 148px); // 上边108px，footer 40px
    padding: 108px 16px 0 18px;
    display: flex;
    justify-content: space-between;

    position: relative;
    z-index: 500;
    > aside {
      width: 500px;
    }
  }

  > footer {
    width: 100%;
    height: 40px;
    background: no-repeat url(../../../assets/bg_footer2.png);
  }

  //  产学研载体区域分布 柱子
  > ul {
    position: absolute;
    width: 1920px;
    height: 1080px;
    top: 0px;
    left: 0px;
    z-index: 1;

    // 光柱
    > li {
      position: absolute;
      > div {
        font-family: 'DIN';
        font-weight: bold;
        font-size: 18px;
        color: #ffffff;
        width: 16px;
        background: linear-gradient(360deg, rgba(255, 236, 130, 0.1) 0%, rgba(247, 170, 91, 0.75) 50%, #ef6833 100%);
        opacity: 1;
        border-radius: 8px;
        animation: zhuScale 2s linear 0s;

        @keyframes zhuScale {
          0% {
            transform: scale(0);
          }
          100% {
            transform: scale(1);
          }
        }

        //   排名、数量
        > section {
          position: absolute;
          top: -30px;
          left: -61px;
          width: 122px;
          height: 26px;
          line-height: 30px;
          padding: 0 14px;
          display: flex;
          justify-content: space-between;
          background: no-repeat url(../../../assets/bg_rank.png);
          background-size: 100% 100%;
          > aside {
            &:last-child {
              > span {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
              }
            }
          }
        }
      }
      //   光柱下 圆圈
      > img {
        height: 16px;
        width: 26px;
        position: absolute;
        bottom: 0px;
        left: -5px;
      }
    }
  }
}

// ---- 产学研载体数 ---
#IURCnt {
  display: flex;
  justify-content: left;
  margin-top: 30px;
  > img {
    width: 74px;
    height: 74px;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    animation: IconScale 4s linear 0s infinite;
  }

  > header {
    line-height: 70px;
    padding: 0 70px 0 20px;
    height: 42px;
    font-size: 30px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0px 0px 6px rgba(5, 143, 145, 0.5);
  }

  > aside {
    text-align: right;
    line-height: 70px;
    font-family: 'DIN';
    font-weight: bold;
    font-size: 36px;
    color: #fcfcfc;
    letter-spacing: 2px;
    text-shadow: 0px 0px 6px #058f91;

    > span {
      line-height: 34px;
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #fcfcfc;
      text-shadow: 0px 0px 6px #034b4f;
    }
  }
}

// ---- 在苏部署、省属科研院所 ----
#IURank {
  box-sizing: border-box;
  width: 520px;
  height: 930px;
  padding: 10px 40px;
  background: no-repeat url(../../../assets/bg_list_right.png);

  > header {
    margin: 54px 0 20px 0px;
    font-size: 22px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    height: 30px;
    line-height: 30px;
    text-shadow: 0px 0px 8px rgba(30, 231, 231, 0.48);
  }

  > ul {
    height: 750px;
    > li {
      display: flex;
      justify-content: left;
      width: 440px;
      height: 60px;
      line-height: 60px;
      margin-bottom: 15px;

      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;

      &.bg_another {
        background: rgba(255, 255, 255, 0.06);
        border-radius: 8px;
      }

      > div {
        background-image: linear-gradient(to bottom, rgba(35, 210, 221, 1), rgba(25, 127, 221, 1) 100%);
        border-radius: 50%;
        width: 26px;
        height: 26px;
        margin: 18px 12px 18px 24px;
        > b {
          margin: 1px;
          font-size: 14px;
          font-family: 'DIN';
          font-weight: bold;
          color: #ffffff;
          line-height: 48px;
          display: block;
          text-align: center;
          width: 24px;
          height: 24px;
          line-height: 24px;
          background: linear-gradient(180deg, #104c50 0%, #2b4a89 100%);
          border-radius: 50%;
        }
      }
    }
  }

  > footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    background: rgba(7, 37, 81, 0.6);
    .el-pager {
      li {
        background: none;
        color: #ffffff;
        font-size: 14px;
        font-weight: 400;
        height: 22px;
        width: 22px;
        padding: 0;
        margin: 0 6px;
        min-width: 22px;
        line-height: 22px;
      }
      .btn-quicknext {
        color: #ffffff;
        height: 22px;
        width: 22px;
        padding: 0;
        margin: 0 6px;
        min-width: 22px;
        line-height: 22px;
      }
      .btn-quickprev {
        color: #ffffff;
        height: 22px;
        width: 22px;
        padding: 0;
        margin: 0 6px;
        min-width: 22px;
        line-height: 22px;
      }
      .active {
        width: 22px;
        height: 22px;
        background: #06e9ff;
        border-radius: 4px;
        color: #052b2c;
      }
      li:hover {
        width: 22px;
        height: 22px;
        background: #06e9ff;
        border-radius: 4px;
        color: #052b2c;
      }
    }
    .el-pagination {
      .btn-next {
        background: none;
        color: #ffffff;
        padding-left: 5px !important;
        height: 22px;
        width: 22px;
        padding: 0;
        margin: 0 6px;
        min-width: 22px;
        line-height: 22px;
      }
      .btn-prev {
        background: none;
        color: #ffffff;
        padding-right: 5px !important;
        height: 22px;
        width: 22px;
        padding: 0;
        margin: 0 6px;
        min-width: 22px;
        line-height: 22px;
      }
      button:hover {
        color: #06e9ff;
      }
      button:disabled {
        color: #c0c4cc;
      }
    }
  }
}
